/**
 * desc:modal框展示找家纺商品信息html
 * @item {object} 商品的信息
 * @ismark {boolean} 是否展示已售罄，下架等遮罩
 * @onClick {func} 点击事件
 *
 */
import React from "react";
import CommonZjfImg from "@/components/CommonImg/ZifComponent";
import CommonSysImg from "@/components/CommonImg/SysComponent";
import CommonPlatImg from "@/components/CommonImg/PlatformComponent";
import CommonTag from "@/components/CommonTag";
import { formatAmount } from "@/utils/utils.jsx";
import { Tooltip } from "antd";
import styles from "./GoodsList.module.less";

//判断是否是系统商品
const checkIsSysGoods = (deliverType, goodsShowType) => {
	if (deliverType == 3) {
		if (goodsShowType == 1) {
			return "sys";
		} else {
			return "shop";
		}
	}
	return "zjf";
};

export default ({ item = {} }) => {
	const {
		deliverType,
		goodsShowType,
		vipPrice,
		zjfGoodsPrice,
		zjfStoreName,
		zjfGoodsImage,
		zjfStoreId,
		zjfGoodsState,
		isCarefullySelected,
		zjfGoodsStorage,
		goodsImage,
		zjfGoodsId,
		skuId,
		goodsName,
		zjfGoodsName,
		goodsSize,
		zjfGoodsSize,
		goodsColor,
		zjfGoodsColor,
		goodsPrice,
		goodsNum,
		storeName,
		outStoreSku
	} = item;

	const goodsType = checkIsSysGoods(deliverType, goodsShowType);

	const zjfPrice = vipPrice || zjfGoodsPrice;

	const newStoreName = goodsType == "sys" ? "系统商品" : goodsType == "shop" ? storeName : zjfStoreName;

	const newGoodsName = goodsType == "zjf" ? zjfGoodsName : goodsName;

	const newSize = goodsType == "zjf" ? zjfGoodsSize : goodsSize;

	const newColor = goodsType == "zjf" ? zjfGoodsColor : goodsColor;

	const newPrice = goodsType == "zjf" ? zjfPrice : goodsPrice;

	const newCode = goodsType == "sys" ? skuId : goodsType == "shop" ? outStoreSku : zjfGoodsId;

	return (
		<div className={styles.goodsBox} key={zjfGoodsId || skuId}>
			{goodsType == "sys" ? (
				<CommonSysImg
					img={goodsImage}
					size="84"
					storeId={zjfStoreId}
					isCloudIcon={isCarefullySelected}
					isMask={true}
					goodsState={zjfGoodsState}
					goodsStorage={zjfGoodsStorage}
				/>
			) : goodsType == "shop" ? (
				<CommonPlatImg img={goodsImage} size="84" />
			) : (
				<CommonZjfImg
					img={zjfGoodsImage}
					storeId={zjfStoreId}
					size="84"
					isCloudIcon={isCarefullySelected}
					isMask={true}
					goodsState={zjfGoodsState}
					goodsStorage={zjfGoodsStorage}
				/>
			)}
			<div className={styles.msgBox}>
				<Tooltip title={newStoreName}>
					<span className="text-overflow common-color3">【{newStoreName}】</span>
				</Tooltip>
				<Tooltip title={newGoodsName}>
					{goodsType == "zjf" ? (
						<a className="text-overflow common-color2" target="_blank" href={`${GOODS_HREF}${zjfGoodsId}`}>
							{newGoodsName}
						</a>
					) : (
						newGoodsName
					)}
				</Tooltip>
				<Tooltip title={item.goodsSize}>
					<span className="text-overflow common-color5">尺码：{newSize}</span>
				</Tooltip>
				<Tooltip title={item.goodsColor}>
					<span className="text-overflow common-color5">颜色：{newColor}</span>
				</Tooltip>
				<Tooltip title={newCode}>
					<span className="text-overflow common-color5">商品编码：{newCode}</span>
				</Tooltip>
				{item.customAtt && (
					<Tooltip title={item.goodsColor}>
						<span className="text-overflow common-color5">其他属性：{item?.customAtt}</span>
					</Tooltip>
				)}
				<span className="common-color9">
					￥{formatAmount(newPrice)}
					<span className="common-color5" style={{ marginLeft: "12px" }}>
						x{goodsNum}
					</span>
				</span>
				<span className="common-color9">
					{[1, 2].includes(deliverType) && <CommonTag type="nahuo" />}
					{deliverType == 3 && <CommonTag type="zifa" />}
					{deliverType == 4 && <CommonTag type="cjzf" />}
				</span>
			</div>
		</div>
	);
};
